<!-- 医院院区表单页面 -->
<template>
  <div class="app-container hospital-form-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="form-card mt8" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-map-location"></i>
          <span>所属地址</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <region-select
              v-model="form.region"
              :show-label="true"
              ref="formRegionSelect"
              @change="handleFormRegionChange"
            />
          </el-col>
          <!-- 地图容器 -->
          <el-col :span="24">
            <el-form-item label="地图导航">
              <div class="map-container">
                <div class="map-tools-header">
                  <div class="map-search">
                    <AMapSearch
                      v-model="searchAddress"
                      :city="form.region.cityName"
                      :web-service-key="webServiceKey"
                      :region="form.region"
                      :disabled="!isRegionSelected"
                      @select="handleSearchSelect"
                      @search="handleSearch"
                    />
                    <div v-if="!isRegionSelected" class="search-tip">
                      <i class="el-icon-warning-outline"></i>
                      请先选择完整的省市区信息
                    </div>
                  </div>
                  <div class="map-actions">
                    <el-tooltip content="重新定位到当前选择的区域" placement="top">
                      <el-button
                        type="primary"
                        icon="el-icon-aim"
                        @click="handleLocateAddress"
                        :disabled="!isRegionSelected"
                        size="small">
                        重新定位
                      </el-button>
                    </el-tooltip>
                  </div>
                </div>
                <div id="mapContainer" class="amap-container">
                  <div v-if="mapLoading" class="map-loading">
                    <i class="el-icon-loading"></i>
                    <p>地图加载中...</p>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="地图坐标" prop="mapLocation">
              <el-input v-model="form.mapLocation" placeholder="请通过地图定位或手动选点获取坐标" readonly prefix-icon="el-icon-position" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <div class="mt8 action-buttons">
        <el-button type="primary" icon="el-icon-check" @click="submitForm">保 存</el-button>
        <el-button icon="el-icon-back" @click="cancel">返 回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import RegionSelect from '/src/components/RegionSelect/index.vue';
import AMapSearch from '/src/components/AMapSearch/index.vue';

export default {
  name: "HospitalAreaForm",
  components: {
    RegionSelect,
    AMapSearch
  },
  data() {
    // 地址选择校验
    const validateProvince = (rule, value, callback) => {
      if (!this.form.region.provinceId) {
        callback(new Error('请选择省份'));
      } else {
        callback();
      }
    };
    const validateCity = (rule, value, callback) => {
      if (!this.form.region.cityId) {
        callback(new Error('请选择城市'));
      } else {
        callback();
      }
    };
    const validateDistrict = (rule, value, callback) => {
      if (!this.form.region.countyId) {
        callback(new Error('请选择区县'));
      } else {
        callback();
      }
    };
    const validateAddress = (rule, value, callback) => {
      if (!value || value.trim() === '') {
        callback(new Error('请输入详细地址'));
      } else {
        callback();
      }
    };

    return {
      // 表单参数
      form: {
        areaId: null,
        areaName: null,
        phone1: null,
        phone2: null,
        busInfo: null,
        address: null,
        mapLocation: null,
        region: {
          provinceId: '',
          cityId: '',
          countyId: '',
          townId: '',
          provinceName: '',
          cityName: '',
          districtName: '',
          streetName: ''
        }
      },
      // 楼层信息表格数据
      floorInfoList: [],
      // 子表选中数据
      checkedFloorInfo: [],
      // 表单校验
      rules: {
        areaName: [
          { required: true, message: "院区名称不能为空", trigger: "blur" }
        ],
        phone1: [
          { required: true, message: "联系电话1不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, validator: validateAddress, trigger: "blur" }
        ],
        'region.provinceId': [
          { required: true, validator: validateProvince, trigger: "change" }
        ],
        'region.cityId': [
          { required: true, validator: validateCity, trigger: "change" }
        ],
        'region.countyId': [
          { required: true, validator: validateDistrict, trigger: "change" }
        ]
      },
      map: null,  // 地图实例
      marker: null, // 标记点实例
      searchAddress: '', // 搜索地址
      searchResults: [], // 搜索结果
      mapKey: '9489186063c1c2967b4c3effc5a2def1', // JS API key
      securityJsCode: '6b3c42d2e3bedad3b3022c2de0d713a4', // JS API安全密钥
      webServiceKey: '0dc8adcabdf921cfb1cd60731a862c69', // Web 服务 key
      mapLoading: true,
      poiSearching: false, // 搜索状态
      autoComplete: null, // 输入提示实例
      searchTips: [], // 搜索提示结果
    };
  },
  computed: {
    // 判断是否已选择完整地区
    isRegionSelected() {
      return !!(this.form.region.provinceId &&
                this.form.region.cityId &&
                this.form.region.countyId);
    },

    // 计算地区地址
    regionAddress() {
      const region = this.form.region;
      let result = '';

      return result;
    }
  },
  created() {
    const areaId = this.$route.params.areaId;
    if (areaId) {
      this.getInfo(areaId);
    }
  },
  mounted() {
    // 组件挂载后初始化地图
    // 确保在 window.AMap 可用后才初始化地图
    const checkMapApiLoaded = () => {
      if (window.AMap) {
        this.initializeMap();
      } else {
        setTimeout(checkMapApiLoaded, 100);
      }
    };

    checkMapApiLoaded();
  },
  beforeDestroy() {
    // 组件销毁前清理地图实例
    if (this.map) {
      this.map = null;
    }
  },
  methods: {
    // 初始化地图的具体方法
    initializeMap() {
      console.log("开始初始化地图...");

      // 确保地图容器存在
      const mapContainer = document.getElementById('mapContainer');
      if (!mapContainer) {
        console.error('找不到地图容器');
        return;
      }

      try {
        // 显示加载状态
        this.mapLoading = true;
        // 检查地图实例是否创建成功
        if (!this.map) {
          throw new Error('地图实例创建失败');
        }
        console.log('地图实例创建成功:', this.map);


      } catch (err) {
        console.error("地图初始化失败:", err);
        this.mapLoading = false;
        this.$modal.msgError('地图初始化失败: ' + err.message);
      }
    },

    /** 获取医院院区详细信息 */
    getInfo(areaId) {
      getHospitalarea(areaId).then(response => {
        const data = response.data;
        console.log('获取到的医院院区数据:', data);

        // 设置表单数据
        this.form = {
          ...data,
          region: {
            provinceId: data.provinceId || '',
            cityId: data.cityId || '',
            countyId: data.countyId || '',
            townId: data.townId || '',
            provinceName: data.provinceName || '',
            cityName: data.cityName || '',
            districtName: data.districtName || '',
            streetName: data.streetName || ''
          }
        };

        this.floorInfoList = data.floorInfoList || [];

        // 如果地图已经初始化，则自动定位
        this.$nextTick(() => {
          if (this.map) {
            this.autoLocateMap();
          }
        });
      });
    },

    /** 表单重置 */
    reset() {
      this.form = {
        areaId: null,
        areaName: null,
        phone1: null,
        phone2: null,
        busInfo: null,
        address: null,
        mapLocation: null,
        region: {
          provinceId: '',
          cityId: '',
          countyId: '',
          townId: '',
          provinceName: '',
          cityName: '',
          districtName: '',
          streetName: ''
        }
      };
      this.floorInfoList = [];
      this.resetForm("form");
      // 重置地址选择组件
      this.$refs.formRegionSelect && this.$refs.formRegionSelect.reset();
    },

    /** 取消按钮 */
    cancel() {
      this.goBack();
    },

    /** 返回列表页面 */
    goBack() {
      this.$tab.closePage();
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 确保地区名称也被包含在提交数据中
          console.log('提交前的表单数据:', this.form);

          // 将地址信息合并到表单数据中
          const submitData = {
            ...this.form,
            provinceId: this.form.region.provinceId,
            cityId: this.form.region.cityId,
            countyId: this.form.region.countyId,
            provinceName: this.form.region.provinceName,
            cityName: this.form.region.cityName,
            districtName: this.form.region.districtName,
            address: this.form.address,        // 详细地址
            mapLocation: this.form.mapLocation, // 地图坐标
            floorInfoList: this.floorInfoList
          };

          console.log('最终提交的数据:', submitData);

          if (this.form.areaId != null) {
            updateHospitalarea(submitData).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$tab.closePage();
            }).catch(() => {});
          } else {
            addHospitalarea(submitData).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$tab.closePage();
            }).catch(() => {});
          }
        }
      });
    },

    /** 楼层信息序号 */
    rowFloorInfoIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },

    /** 楼层信息添加按钮操作 */
    handleAddFloorInfo() {
      let obj = {};
      obj.floorNumber = "";
      obj.floorName = "";
      this.floorInfoList.push(obj);
    },

    /** 楼层信息删除按钮操作 */
    handleDeleteFloorInfo() {
      if (this.checkedFloorInfo.length == 0) {
        this.$modal.msgError("请先选择要删除的楼层信息数据");
      } else {
        const floorInfoList = this.floorInfoList;
        const checkedFloorInfo = this.checkedFloorInfo;
        this.floorInfoList = floorInfoList.filter(function(item) {
          return checkedFloorInfo.indexOf(item.index) == -1
        });
      }
    },

    /** 复选框选中数据 */
    handleFloorInfoSelectionChange(selection) {
      this.checkedFloorInfo = selection.map(item => item.index)
    },

    /** 处理搜索选择 */
    handleSearchSelect(item) {
      console.log('选择了搜索结果:', item);
      if (!item) {
        console.warn('无效的搜索结果项');
        return;
      }

      try {
        if (item.location) {
          const locationParts = item.location.split(',');

          if (locationParts.length >= 2) {
            const lng = Number(locationParts[0]);
            const lat = Number(locationParts[1]);

            if (!isNaN(lng) && !isNaN(lat)) {
              console.log('从搜索结果获取坐标:', lng, lat);

              try {
                // 更新地图标记
                this.updateMapMarker({
                  lng: lng,
                  lat: lat
                });

                // 更新地址信息
                if (item.address || item.name) {
                  this.form.address = item.address || item.name;
                  console.log('从搜索结果更新地址:', this.form.address);
                }

                // 设置地图级别并居中
                if (this.map) {
                  this.map.setZoomAndCenter(15, [lng, lat]);
                }
              } catch (error) {
                console.error('处理搜索结果时出错:', error);

                // 即使标记更新失败，至少尝试更新地址信息
                if (item.address || item.name) {
                  this.form.address = item.address || item.name;
                }

                // 尝试手动设置地图中心点
                if (this.map) {
                  try {
                    this.map.setZoomAndCenter(15, [lng, lat]);
                  } catch (e) {
                    console.error('设置地图中心点失败:', e);
                  }
                }

                // 保存坐标
                this.form.mapLocation = `${lng},${lat}`;

                // 通知用户，但不中断操作
                this.$message.warning('地图标记创建失败，但已记录位置信息');
              }
            } else {
              console.warn('坐标格式无效:', locationParts);
              this.$message.warning('坐标格式无效，请选择其他位置');
            }
          } else {
            console.warn('无法解析位置信息:', item.location);
            this.$message.warning('位置信息无效，请选择其他位置');
          }
        } else {
          console.warn('搜索结果项没有位置信息');
          this.$message.warning('所选项没有位置信息，请选择其他地点');
        }
      } catch (error) {
        console.error('处理搜索选择时发生错误:', error);
        this.$modal.msgError('处理搜索结果失败: ' + error.message);
      }
    },

    /** 搜索地址 */
    handleSearch() {
      if (!this.searchAddress) {
        this.$modal.msgWarning("请输入要搜索的地址");
        return;
      }

      try {
        this.poiSearching = true;

        // 确定搜索区域范围
        let cityParam = '';
        const region = this.form.region;

        if (region.districtName) {
          // 如果选择了区/县，优先使用区/县名称
          cityParam = region.districtName;
        } else if (region.cityName && region.cityName !== '市辖区') {
          // 如果选择了城市（且不是"市辖区"），使用城市名称
          cityParam = region.cityName;
        } else if (region.provinceName) {
          // 如果只选择了省份，使用省份名称
          cityParam = region.provinceName;
        }

        // 构建请求参数
        const params = {
          key: this.webServiceKey,
          keywords: this.searchAddress,
          city: cityParam,
          citylimit: 'true',
          extensions: 'all'
        };

        // 构建查询字符串
        const queryString = Object.keys(params)
          .map(key => `${key}=${encodeURIComponent(params[key])}`)
          .join('&');

        // 发起 POI 搜索请求
        fetch(`https://restapi.amap.com/v3/place/text?${queryString}`)
          .then(response => response.json())
          .then(result => {
            if (result.status === '1' && result.pois && result.pois.length > 0) {
              const firstPoi = result.pois[0];
              const [lng, lat] = firstPoi.location.split(',');

              // 验证搜索结果是否在选定区域内
              let isInSelectedRegion = true;

              if (region.districtName) {
                isInSelectedRegion = firstPoi.adname && (
                  firstPoi.adname.includes(region.districtName) ||
                  region.districtName.includes(firstPoi.adname) ||
                  firstPoi.adname.includes(region.districtName.substring(0, 2))
                );
              } else if (region.cityName && region.cityName !== '市辖区') {
                isInSelectedRegion = firstPoi.cityname && (
                  firstPoi.cityname.includes(region.cityName) ||
                  region.cityName.includes(firstPoi.cityname)
                );
              } else if (region.provinceName) {
                isInSelectedRegion = firstPoi.pname && (
                  firstPoi.pname.includes(region.provinceName) ||
                  region.provinceName.includes(firstPoi.pname)
                );
              }

              if (isInSelectedRegion) {
                // 更新地图标记
                this.updateMapMarker({
                  lng: Number(lng),
                  lat: Number(lat)
                });

                // 更新地址信息
                this.form.address = firstPoi.address || firstPoi.name;

                // 设置地图级别并居中
                this.map.setZoomAndCenter(15, [lng, lat]);
              } else {
                // 提示用户搜索结果不在所选区域内
                let regionName = region.districtName ||
                                (region.cityName !== '市辖区' ? region.cityName : region.provinceName);
                this.$modal.msgWarning(`搜索结果不在${regionName}区域内，请修改搜索条件`);
              }
            } else {
              // 获取选定区域名称
              let regionName = region.districtName ||
                               (region.cityName !== '市辖区' ? region.cityName : region.provinceName);
              this.$modal.msgWarning(`未在${regionName}区域内找到相关地点，请尝试其他关键词`);
            }
          })
          .catch(error => {
            console.error('搜索执行错误:', error);
            this.$modal.msgError("搜索功能异常，请重试");
          })
          .finally(() => {
            this.poiSearching = false;
          });
      } catch (error) {
        console.error('搜索过程出错:', error);
        this.poiSearching = false;
        this.$modal.msgError("搜索功能异常，请重试");
      }
    },

    /** 自动定位到地址 */
    autoLocateMap() {
      console.log('开始自动定位流程');

      // 确保地图已经初始化
      if (!this.map) {
        console.error('地图尚未初始化，无法自动定位');
        this.$modal.msgError("地图尚未初始化，请刷新页面重试");
        return;
      }

      // 显示加载指示器
      this.mapLoading = true;
      const startTime = Date.now();

      console.log('当前表单数据:', {
        mapLocation: this.form.mapLocation,
        address: this.form.address,
        region: this.form.region
      });

      // 尝试方法1: 使用保存的坐标定位
      if (this.form.mapLocation) {
        try {
        const [lng, lat] = this.form.mapLocation.split(',');
          if (lng && lat && !isNaN(Number(lng)) && !isNaN(Number(lat))) {
            console.log('方法1: 使用保存的精确坐标定位');
        this.updateMapMarker({ lng: Number(lng), lat: Number(lat) });
            this.mapLoading = false;
            return;
          } else {
            console.warn('保存的坐标格式无效:', this.form.mapLocation);
          }
        } catch (e) {
          console.error('坐标解析错误:', e);
        }
      }

      // 尝试方法2: 使用详细地址定位
      if (this.form.address) {
        console.log('方法2: 使用详细地址定位:', this.form.address);

        // 使用Web服务API而不是JS API
        const params = {
          key: this.webServiceKey,
          address: this.form.address,
          output: 'json'
        };

        // 构建查询字符串
        const queryString = Object.keys(params)
          .map(key => `${key}=${encodeURIComponent(params[key])}`)
          .join('&');

        const url = `https://restapi.amap.com/v3/geocode/geo?${queryString}`;
        console.log('发送地址定位请求:', url);

        // 发送请求
        fetch(url)
          .then(response => response.json())
          .then(result => {
            console.log('地址定位API响应:', result);

            if (result.status === '1' && result.geocodes && result.geocodes.length > 0) {
              const locationParts = result.geocodes[0].location.split(',');
              const location = {
                lng: parseFloat(locationParts[0]),
                lat: parseFloat(locationParts[1])
              };

              console.log('使用详细地址定位成功:', location);
              this.updateMapMarker(location);
            } else {
              console.warn('详细地址定位失败:', result);
              // 如果详细地址定位失败，则尝试区域定位
              if (this.isRegionSelected) {
                this.handleLocateAddress();
              } else {
                // 所有方法都失败，定位到默认位置
                this.updateMapMarker({ lng: 116.397428, lat: 39.90923 }); // 北京
                this.$modal.msgWarning("无法定位到有效地址，请手动选择位置");
              }
            }
          })
          .catch(error => {
            console.error('地址定位请求失败:', error);
            // 尝试使用区域定位
            if (this.isRegionSelected) {
              this.handleLocateAddress();
            } else {
              this.updateMapMarker({ lng: 116.397428, lat: 39.90923 }); // 北京
              this.$modal.msgWarning("无法定位，请手动选择位置");
            }
          })
          .finally(() => {
            // 确保加载指示器至少显示500毫秒，避免闪烁
            const elapsed = Date.now() - startTime;
            if (elapsed < 500) {
              setTimeout(() => {
                this.mapLoading = false;
              }, 500 - elapsed);
            } else {
              this.mapLoading = false;
            }
          });

        return;
      }

      // 尝试方法3: 使用区域定位
      if (this.isRegionSelected) {
        console.log('方法3: 使用区域定位:', this.regionAddress);
        this.handleLocateAddress();

        // 延迟关闭加载状态
        setTimeout(() => {
          this.mapLoading = false;
        }, 800);
        return;
      }

      // 方法4: 没有任何定位信息时，定位到默认位置（北京）
      console.warn('没有可用的定位信息，使用默认位置');
      this.updateMapMarker({ lng: 116.397428, lat: 39.90923 });
      this.$modal.msgWarning("请选择省市区或输入详细地址");
      this.mapLoading = false;
    },

    /** 根据地址定位 */
    handleLocateAddress() {
      if (!this.isRegionSelected) {
        this.$modal.msgError("请先选择省市区");
        return;
      }

      const region = this.form.region;
      console.log('当前选择的区域信息:', region);

      // 显示加载指示器
      this.mapLoading = true;

      // 构建搜索地址
      let searchAddress = '';
      if (region.districtName) {
        searchAddress = `${region.provinceName}${region.cityName === '市辖区' ? '' : region.cityName}${region.districtName}`;
      } else if (region.cityName && region.cityName !== '市辖区') {
        searchAddress = `${region.provinceName}${region.cityName}`;
      } else {
        searchAddress = region.provinceName;
      }

      console.log('尝试定位到地址:', searchAddress);

      try {
        // 直接设置缩放级别
        let zoom = 9; // 省级默认缩放
        if (region.districtName) {
          zoom = 13; // 区县级缩放
        } else if (region.cityName && region.cityName !== '市辖区') {
          zoom = 11; // 市级缩放
        }

        // 使用Web服务API进行地理编码（而不是JS API）
        const params = {
          key: this.webServiceKey, // 使用Web服务密钥
          address: searchAddress,
          output: 'json'
        };

        // 构建查询字符串
        const queryString = Object.keys(params)
          .map(key => `${key}=${encodeURIComponent(params[key])}`)
          .join('&');

        const url = `https://restapi.amap.com/v3/geocode/geo?${queryString}`;
        console.log('发送地址定位请求:', url);

        // 发送请求获取坐标
        fetch(url)
          .then(response => response.json())
          .then(result => {
            console.log('地址定位API响应:', result);

            if (result.status === '1' && result.geocodes && result.geocodes.length > 0) {
              const geocode = result.geocodes[0];
              const locationParts = geocode.location.split(',');
              const location = {
                lng: parseFloat(locationParts[0]),
                lat: parseFloat(locationParts[1])
              };

              console.log('定位成功:', location);

              // 更新地图视图
              this.map.setZoomAndCenter(zoom, [location.lng, location.lat]);

              // 更新标记 - 使用兼容方式清除旧标记
              if (this.marker) {
                try {
                  // 1.4.x版本API使用remove()方法
                  if (typeof this.marker.remove === 'function') {
                    this.marker.remove();
                  }
                  // 2.x版本可能使用setMap(null)方法
                  else if (typeof this.marker.setMap === 'function') {
                    this.marker.setMap(null);
                  }
                  // 如果都不支持，尝试从地图中清除
                  else if (this.map && typeof this.map.remove === 'function') {
                    this.map.remove(this.marker);
                  }
                  // 最后的兜底方法
                  else {
                    console.log('无法使用已知方法移除标记，将创建新标记');
                  }
                } catch (e) {
                  console.warn('移除旧标记时出错:', e);
                }
              }

              try {
                // 创建新标记
                this.marker = new AMap.Marker({
                  position: [location.lng, location.lat],
                  map: this.map
                });

                // 更新表单坐标
                this.form.mapLocation = `${location.lng},${location.lat}`;

                // 更新地址
                if (geocode.formatted_address) {
                  this.form.address = geocode.formatted_address;
                } else {
                  this.form.address = searchAddress;
                }
              } catch (e) {
                console.error('创建新标记失败:', e);
                // 即便标记创建失败，仍然更新位置信息
                this.form.mapLocation = `${location.lng},${location.lat}`;
                this.form.address = geocode.formatted_address || searchAddress;
                this.$message.warning('标记创建失败，但已更新位置信息');
              }
            } else {
              console.error('地址定位失败:', result);
              this.$message.warning('无法精确定位到所选区域，请手动选择位置');
              this.form.address = searchAddress;
            }
          })
          .catch(error => {
            console.error('地址定位请求失败:', error);
            this.$message.error('地址定位服务异常，请手动选择位置');
            this.form.address = searchAddress;
          })
          .finally(() => {
            this.mapLoading = false;
          });
      } catch (error) {
        console.error('定位过程出错:', error);
        this.mapLoading = false;
        this.$message.error('定位失败，请手动选择位置');
      }
    },

    /** 更新地图标记和坐标 */
    updateMapMarker(location) {
      if (!location || !location.lng || !location.lat) {
        console.error('提供的位置坐标无效');
        return;
      }

      console.log('准备更新标记位置:', location);

      // 更新表单中的坐标值
      this.form.mapLocation = `${location.lng},${location.lat}`;

      try {
        // 确保地图已加载
        if (!this.map) {
          console.error('地图尚未初始化');
          return;
        }

        // 清除旧标记 - 兼容不同版本API的移除方法
      if (this.marker) {
          try {
            // 1.4.x版本API使用remove()方法
            if (typeof this.marker.remove === 'function') {
              this.marker.remove();
            }
            // 2.x版本可能使用setMap(null)方法
            else if (typeof this.marker.setMap === 'function') {
              this.marker.setMap(null);
            }
            // 如果都不支持，尝试从地图中清除
            else if (this.map && typeof this.map.remove === 'function') {
              this.map.remove(this.marker);
            }
            // 最后的兜底方法
            else {
              console.log('无法使用已知方法移除标记，将创建新标记');
            }
          } catch (e) {
            console.warn('移除旧标记时出错:', e);
          }
        }

        // 创建新标记 - 兼容不同版本API的创建方法
        try {
          this.marker = new AMap.Marker({
            position: new AMap.LngLat(location.lng, location.lat),
            title: '当前位置',
            map: this.map
          });

          // 设置地图中心点和缩放级别
          this.map.setCenter([location.lng, location.lat]);
          this.map.setZoom(15);
        } catch (e) {
          console.error('创建新标记失败:', e);
          this.$modal.msgError('标记创建失败：' + e.message);
        }

        // 获取地址信息
        this.getAddressFromCoordinate(location.lng, location.lat)
          .then(address => {
            if (address) {
              this.form.address = address;
              console.log('获取到的地址:', address);
      } else {
              throw new Error('无法获取详细地址');
            }
          })
          .catch(error => {
            console.error('地址获取失败:', error);
            this.form.address = this.buildDefaultAddress();
            this.$message.warning('无法获取详细地址，已使用基本地址');
          });
      } catch (error) {
        console.error('创建或更新标记失败:', error);
        this.$modal.msgError('创建标记失败，请刷新页面重试');
      }
    },

    // 从坐标获取地址信息
    getAddressFromCoordinate(lng, lat) {
      return new Promise((resolve, reject) => {
        // 确保设置了正确的JS安全密钥
        console.log('使用的JS API密钥:', this.mapKey);
        console.log('使用的安全密钥:', this.securityJsCode);
        console.log('当前的安全配置:', window._AMapSecurityConfig);

        // 再次确认安全密钥配置
        if (!window._AMapSecurityConfig || window._AMapSecurityConfig.securityJsCode !== this.securityJsCode) {
          window._AMapSecurityConfig = {
            securityJsCode: this.securityJsCode
          };
          console.log('安全配置已重置:', window._AMapSecurityConfig);
        }

        // 直接使用 Web 服务 API 代替 JS API 的地理编码
        const params = {
          key: this.webServiceKey,
          location: `${lng},${lat}`,
          extensions: 'base',
          output: 'json'
        };

        // 构建请求 URL
        const queryString = Object.keys(params)
          .map(key => `${key}=${encodeURIComponent(params[key])}`)
          .join('&');

        const url = `https://restapi.amap.com/v3/geocode/regeo?${queryString}`;
        console.log('发送地理编码请求:', url);

        // 发送请求
        fetch(url)
          .then(response => response.json())
          .then(result => {
            console.log('地理编码响应:', result);

            if (result.status === '1' && result.regeocode) {
              resolve(result.regeocode.formatted_address);
            } else {
              reject(new Error('地理编码服务返回错误'));
            }
          })
          .catch(error => {
            console.error('地理编码请求失败:', error);
            reject(error);
          });
      });
    },

    // 构建默认地址
    buildDefaultAddress() {
      if (this.isRegionSelected) {
        const region = this.form.region;
        let baseAddress = '';
        if (region.provinceName) baseAddress += region.provinceName;
        if (region.cityName && region.cityName !== '市辖区') baseAddress += region.cityName;
        if (region.districtName) baseAddress += region.districtName;
        return baseAddress + '(具体位置)';
      } else {
        return '位置坐标: ' + this.form.mapLocation;
      }
    },

    /** 监听地址变化 */
    handleAddressChange() {
      // 如果地址发生变化，可以选择是否自动触发定位
      console.log('地址已更新:', this.regionAddress);
    },

    /** 处理地区选择变化 */
    handleFormRegionChange(region) {
      if (!region) {
        this.form.region = {
          provinceId: '',
          cityId: '',
          countyId: '',
          townId: '',
          provinceName: '',
          cityName: '',
          districtName: '',
          streetName: ''
        };
        return;
      }

      // 更新表单中的地区信息
      this.form.region = {
        ...this.form.region,
        ...region
      };

      // 如果已经选择了完整的地区，尝试定位到该地区
      if (this.isRegionSelected && this.map) {
        // 延迟一下再执行定位，避免可能的竞态条件
        setTimeout(() => {
          this.handleLocateAddress();
        }, 100);
      }
    },

    // 处理地图点击事件
    handleMapClick(e) {
      try {
        console.log('地图点击事件触发:', e);
        // 兼容处理不同版本 API 的坐标获取方式
        let lng, lat;
        if (e.lnglat) {
          if (typeof e.lnglat.getLng === 'function') {
            lng = e.lnglat.getLng();
            lat = e.lnglat.getLat();
          } else if (e.lnglat.lng !== undefined && e.lnglat.lat !== undefined) {
            lng = e.lnglat.lng;
            lat = e.lnglat.lat;
          }
        } else if (e.pos) {
          // 某些版本可能使用pos属性
          lng = e.pos.lng || e.pos.longitude;
          lat = e.pos.lat || e.pos.latitude;
        }

        if (lng !== undefined && lat !== undefined) {
          console.log('获取到有效坐标:', lng, lat);
          this.updateMapMarker({
            lng: lng,
            lat: lat
          });
        } else {
          console.error('无法从点击事件中获取有效坐标');
        }
      } catch (err) {
        console.error("点击事件处理错误:", err);
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.hospital-form-container {
  padding-bottom: 20px;
}

.mt8 {
  margin-top: 12px;
}

.text-center {
  text-align: center;
}

.form-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  }

  .card-header {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #409EFF;
    font-size: 16px;

    i {
      margin-right: 8px;
      font-size: 18px;
    }

    .header-right {
      margin-left: auto;
    }
  }

  .empty-tip {
    text-align: center;
    padding: 20px;
    color: #909399;
    font-size: 14px;

    i {
      font-size: 20px;
      margin-right: 8px;
      vertical-align: middle;
    }
  }
}

.action-buttons {
  text-align: center;
  margin-top: 24px;
  padding: 16px 0;

  .el-button {
    min-width: 120px;
    border-radius: 4px;
  }
}

.region-select {
  :deep(.el-select) {
    width: 150px;
    margin-right: 8px;

    &:last-child {
      margin-right: 0;
    }
  }
}

/* 地图相关样式 */
.map-container {
  position: relative;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  }

  .map-tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #dcdfe6;
    background-color: #f5f7fa;

    .map-search {
      flex: 1;
      max-width: 500px;
      position: relative;

      .search-tip {
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 4px;
        font-size: 12px;
        color: #E6A23C;
        display: flex;
        align-items: center;

        i {
          margin-right: 4px;
        }
      }

      :deep(.el-input-group__append) {
        background-color: #409EFF;
        border-color: #409EFF;
        color: #fff;
        padding: 0 15px;

        &.is-disabled {
          background-color: #F5F7FA;
          border-color: #DCDFE6;
          color: #C0C4CC;
        }
      }

      :deep(.el-input__inner) {
        border-right: 0;

        &:disabled {
          background-color: #F5F7FA;
          border-color: #E4E7ED;
          color: #C0C4CC;
        }
      }
    }

    .map-actions {
      margin-left: 15px;

      .el-button {
        font-size: 14px;

        &:hover:not(:disabled) {
          opacity: 0.9;
        }

        &:disabled {
          color: #C0C4CC;
          cursor: not-allowed;
        }

        i {
          margin-right: 4px;
        }
      }
    }
  }

  .amap-container {
    width: 100%;
    height: 400px;
    position: relative;

    .map-loading {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.9);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100;

      i {
        font-size: 32px;
        color: #409EFF;
        margin-bottom: 8px;
      }

      p {
        margin: 0;
        color: #606266;
        font-size: 14px;
      }
    }
  }

  .map-footer {
    padding: 12px 15px;
    background-color: #f5f7fa;
    border-top: 1px solid #dcdfe6;

    .address-preview {
      margin-bottom: 8px;

      .preview-item {
        display: flex;
        align-items: center;
        margin-bottom: 4px;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          color: #606266;
          margin-right: 8px;
          font-size: 13px;
          display: flex;
          align-items: center;

          i {
            margin-right: 4px;
            color: #409EFF;
          }
        }

        .value {
          color: #303133;
          font-size: 13px;
          flex: 1;
        }
      }
    }

    .coordinate-info {
      text-align: right;

      .el-tag {
        font-family: monospace;
      }
    }
  }
}
</style>
